<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

<body style="text-align: center;">
  <canvas class="zdog-canvas" width="480" height="480"></canvas>
</body>

<script src="./js/zfont.min.js"></script>

<script>

  const pi = 3.141592654;

  const cubeSize = 200;

  const lineWidth = 15;

  let isSpinning = true;

  let illo = new Zdog.Illustration({
    element: '.zdog-canvas',
    dragRotate: true,
    onDragStart: function () {
      isSpinning = false;
    },
  });

  // square
  let box = new Zdog.Box({
    addTo: illo,
    width: cubeSize,
    height: cubeSize,
    depth: cubeSize,
    stroke: false,
    color: '#C25', // default face color
    leftFace: '#EA0',
    rightFace: '#E62',
    topFace: '#ED0',
    bottomFace: '#636',
  });
  var p = 0;

  var ws = new WebSocket("ws://localhost:19002/ws");

  ws.onmessage = (event) => {
    console.log(event.data)
    let message_json = JSON.parse(event.data)
    if(message_json.data.param === "Left")
    {
      illo.rotate.y += 0.01;
    }
    if(message_json.data.param === "Right")
    {
      illo.rotate.y -= 0.01;
    }
    if(message_json.data.param === "Down")
    {
      illo.rotate.x += 0.01;
    }
    if(message_json.data.param === "Up")
    {
      illo.rotate.x -= 0.01;
    }
    if(message_json.data.param === "Shake")
    {
      illo.rotate.z += 0.03;
    }
  };

  //illo.rotate.z = pi / 3;

  function animate() {
    var interval_func = setInterval(
      () => {
        // if (p < 1000) {
        //     p++;
        // }
        // else {
        //     clearInterval(interval_func);
        // }

        // illo.rotate.y +=  0.03;
        if (ws.readyState === WebSocket.OPEN) {
          ws.send(JSON.stringify({
            "sender": "js",
            "opCode": "get_bitstate"
          }))
        }
        illo.updateRenderGraph();
      }, 10);

  }
  animate();

</script>

</html>